<html>
<head>
	<title>nCaptcha 2 Demo</title>
	<style type="text/css">
		html {
			color: white;
			background-color: black;
		}

		.tooltip {
			position: relative;
			display: inline-block;
			border-bottom: 1px dotted black;
			/* If you want dots under the hoverable text */
		}

		.tooltip .tooltiptext {
			visibility: hidden;
			width: 240px;
			background-color: #555;
			color: #fff;
			text-align: center;
			padding: 5px 0;
			border-radius: 6px;

			/* Position the tooltip text */
			position: absolute;
			z-index: 1;
			bottom: 125%;
			left: 50%;
			margin-left: -60px;

			/* Fade in tooltip */
			opacity: 0;
			transition: opacity 0.3s;
		}

		.tooltip .tooltiptext::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: #555 transparent transparent transparent;
		}

		.tooltip:hover .tooltiptext {
			visibility: visible;
			opacity: 1;
		}
	</style>
	<script type="text/javascript">
		function send_request(url, data, onFail, onSuccess) {
			if (typeof fetch != "undefined") {
				fetch(url).then(function (response) {
					return response.text();
				}).then(function (json) {
					onSuccess(json);
				}).catch(function (ex) {
					console.error(ex);
					onFail();
				});
			} else {
				console.warn("send_request() -> Outdated browser found, attempting fallback method...");
				var http = new XMLHttpRequest();
				http.open('POST', url, true);
				http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

				var hasResponse = false;
				//var res = "";
				http.onreadystatechange = function () {
					if (http.readyState == 4 && http.status == 200) {
						//		res = http.responseText;
						onSuccess(http.responseText.split("\n")[4]);
					}
				}
				http.ontimeout = function () {
					alert("nTube: onTimeout() was called when fetching your video!");
				}
				http.send(params);
			}
			//var http = new XMLHttpRequest();
			//var params = data;
			//http.timeout = 0;
			//http.responseType = 'blob';
			//http.open('POST', url, true);
			//http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

			//var hasResponse = false;
			//var res = "";
			//http.onreadystatechange = function() {
			//	if (http.readyState == 4 && http.status == 200) {
			//		res = http.responseText;
			//		onSuccess(http.responseText);
			//	}
			//}
			//http.ontimeout = function() {
			//	alert("nTube: onTimeout() was called when fetching your video!");
			//}
			//http.send(params);

			/*		
			var stop = false;
			var time = 0;
			while (!hasResponse) {
				if (stop) {
					break;
				}
				if (time > 1500) {
					//alert("Timeout occured, try again.");
					onFail();
					stop = true;
				}
				var ix = -1;
				time += 1;
			}*/
		}

		function onSuccess(uid) {
			document.getElementById("_auth").innerHTML = "Authentication UID: " + uid;
			send_request("/captcha/check_uid?input=" + uid, "", function () {
				document.getElementById("_auth_uid").innerHTML = "Valid UID: false";
			}, function (data) {
				try {
					var rsplit = data.split("\n");
					console.debug(rsplit);
					var result = rsplit[0];
					if (rsplit.length > 1) {
						console.debug("Lease Time: " + rsplit[1]);
					}
					if (result == "VALID") {
						document.getElementById("_auth_uid").innerHTML = "Valid UID: true";
					} else {
						document.getElementById("_auth_uid").innerHTML = "Valid UID: false";
					}
				} catch (e) {
					document.getElementById("_auth_uid").innerHTML = e;
				}
			});
		}

		function reloadCaptcha() {
			createCaptcha();
		}

		window.onload = function () {
			createCaptcha();
		}

		function createCaptcha() {
			document.getElementById("__ns_check").style.display = "none";
			document.getElementById("__ns_check").style.visibility = "hidden";
			document.getElementById("__captcha_input").value = "";
			document.getElementById("__captcha").style.display = "hidden";
			document.getElementById("__captcha_input").style.display = "inline-block";
			document.getElementById("__captcha_submit").style.display = "";
			document.getElementById("__captcha_reload").style.display = "";
			send_request("/captcha/generate_captcha", "", function () {
				alert("nCaptcha failed to load basic data.");
			}, function (data) {
				var x = data.split("\n");
				var dta = x[0];
				var t = x[1];
				var uid = x[2];
				document.getElementById("__captcha").style.display = "";
				if (t == "type:screenwords" || t == "type:mutliword") {
					document.getElementById("_instructions").innerHTML = "Enter the letters above.";
				} else if (t == "type:bot_detected") {
					document.getElementById("_ncaptcha_border").style.borderColor = "red";
					document.getElementById("_instructions").innerHTML = "Try again later.";
					document.getElementById("__captcha_submit").style.display = "none";
					document.getElementById("__captcha_input").style.display = "none";
					document.getElementById("__captcha_reload").style.display = "none";
					document.getElementById("_ncaptcha_border").style.borderColor = "red";
					document.getElementById("__captcha").style.display = "none";
					window.setTimeout(function () {
						window.onload();
					}, 1000 * 120);
					return;
				} else if (t == "type:captcha_done") {
					document.getElementById("_ncaptcha_border").style.borderColor = "green";
					onSuccess(uid);
					document.getElementById("_ncaptcha_border").style.borderColor = "green";
					document.getElementById("_instructions").innerHTML = "Captcha already done.";
					document.getElementById("__captcha_submit").style.display = "none";
					document.getElementById("__captcha_reload").style.display = "none";
					document.getElementById("__captcha_input").style.display = "none";
					document.getElementById("__captcha").style.display = "none";
					return;
				} else if (t == "type:shapes") {
					document.getElementById("_instructions").innerHTML = "Enter the shape above in LOWER case.";
				} else if (t == "type:messedup") {
					document.getElementById("_instructions").innerHTML = "Enter the word within the halfed then reversed word above.";
				} else if (t == "type:math") {
					document.getElementById("_instructions").innerHTML = "Enter the answer to the math question.";
				} else if (t == "type:objectid") {
					document.getElementById("_instructions").innerHTML = "Enter the item in the above image.";
				} else if (t == "type:truefalse") {
					document.getElementById("_instructions").innerHTML = "Enter the value of the statement. [true/false]";
				}
				document.getElementById("__captcha").src = dta;
			})
		}

		function verify() {
			document.getElementById("_instructions").innerHTML = "Verifying...";
			var inp = document.getElementById("__captcha_input").value;
			send_request("/captcha/check_captcha?input=" + inp, "", function () {
				document.getElementById("_instructions").innerHTML = "Internal error occured, try again. [connect]";
				setTimeout(function () {
					window.onload();
				}, 2000);
			}, function (data) {
				/**
				*	Note: this part should be done from the server.
				*/
				var x = data.split("\n");
				try {
					var response = x[0];
					var uid = x[1];
					if (response == null || response == "") {
						document.getElementById("_instructions").innerHTML = "Internal error occured, try again. [response]";
						setTimeout(function () {
							window.onload();
						}, 2000);
						return;
					}
					if (response == "failed::0") {
						document.getElementById("_instructions").innerHTML = "Captcha failed, try again.";
						setTimeout(function () {
							window.onload();
						}, 2000);
						return;
					} else if (response == "passed::1") {
						document.getElementById("_ncaptcha_border").style.borderColor = "green";
						document.getElementById("_instructions").innerHTML = "Captcha passed.";
						document.getElementById("__captcha_submit").style.display = "none";
						document.getElementById("__captcha_input").style.display = "none";
						document.getElementById("__captcha_reload").style.display = "none";
						document.getElementById("__captcha").style.display = "none";
						document.getElementById("_ncaptcha_border").style.borderColor = "green";
						onSuccess(uid);
						return;
					} else {
						document.getElementById("_instructions").innerHTML = "Unexpected result, try again.";
						setTimeout(function () {
							window.onload();
						}, 2000);
					}
				} catch (ex) {
					console.error(ex);
					document.getElementById("_instructions").innerHTML = "Internal error occured, try again. [ex]";
					setTimeout(function () {
						window.onload();
					}, 2000);
				}
			});
		}
	</script>
</head>
<body>
	<div id="_ncaptcha_border" style="border: 1px solid blue;width: 280px;line-height: 85%;">
		<div style="background-color: red;width:100%;" id="__ns_check">
			<center>
				<a href="_captcha_nojsguide.html" style="text-decoration: none; color: white;">Click me for No
					Javascript Guide</a>
			</center>
		</div>
		<img id="__captcha" src="generate_captcha_fallback&source=imgID" alt="Loading captcha... JS is required.">
		<p id="_instructions" style="font-family: sans-serif;text-align: center;">NoScript users, check the
			guide.<br>Waiting for captcha via JS...</p>
		<input style="display: inline-block;width:65%;color: inherit;background-color: inherit;"
			id="__captcha_input" /><input id="__captcha_submit" onclick="verify();" type="submit" value="Submit">
		<br>
		<img src="_captcha_logo.png" style="color: white;font-size: x-small;" alt="nCaptcha 2.0">
		<input style="border:1px solid gray;color: inherit;background-color: inherit;display: none;"
			id="__captcha_reload" onclick="reloadCaptcha();" type="submit" value="Reload">
	</div>
	<p id="_auth">Authentication UID: [Waiting...]</p>
	<p id="_auth_uid">Valid UID: false</p>
</body>
</html>